API اطلاعات شبکه در فرانت‌اند: تطبیق تجربه کاربری با کیفیت اتصال

در دنیای متصل امروزی، سرعت اتصال به اینترنت به شدت متفاوت است. کاربرانی که به وب‌سایت یا برنامه وب شما دسترسی پیدا می‌کنند، می‌توانند هر چیزی از اتصالات فیبر نوری بسیار سریع گرفته تا شبکه‌های تلفن همراه کند و غیرقابل اعتماد را تجربه کنند. ارائه یک تجربه کاربری مثبت و مداوم نیازمند تطبیق فرانت‌اند شما با این شرایط متغیر شبکه است. API اطلاعات شبکه در فرانت‌اند ابزاری قدرتمند برای دستیابی به این هدف فراهم می‌کند.

درک API اطلاعات شبکه

API اطلاعات شبکه به توسعه‌دهندگان وب اجازه می‌دهد تا به اطلاعاتی درباره اتصال شبکه کاربر دسترسی پیدا کنند، از جمله:

• نوع مؤثر (Effective Type): تخمینی از نوع اتصال (مثلاً 'slow-2g', '2g', '3g', '4g').
• سرعت دانلود (Downlink): پهنای باند تخمینی اتصال بر حسب مگابیت بر ثانیه (Mbps).
• زمان رفت و برگشت (RTT): تخمینی از زمان رفت و برگشت اتصال بر حسب میلی‌ثانیه.
• صرفه‌جویی در داده (Save Data): یک مقدار بولی (boolean) که نشان می‌دهد آیا کاربر حالت کاهش مصرف داده را درخواست کرده است یا خیر.
• نوع اتصال (Connection Type): (منسوخ شده، اما همچنان برای مرورگرهای قدیمی‌تر مفید است) فناوری اتصال زیربنایی (مثلاً 'bluetooth', 'cellular', 'ethernet', 'wifi', 'wimax', 'other', 'none').

این اطلاعات به توسعه‌دهندگان قدرت می‌دهد تا تجربه کاربری را بر اساس قابلیت‌های واقعی اتصال شبکه کاربر تنظیم کنند.

بررسی پشتیبانی از API

قبل از استفاده از API، بررسی پشتیبانی مرورگر ضروری است. به این صورت:

            if ('connection' in navigator) {
  // Network Information API is supported
} else {
  // Network Information API is not supported
}
            

              
                Copy
              
            
          

تطبیق تجربه کاربری: مثال‌های کاربردی

در اینجا چندین روش کاربردی برای بهره‌برداری از API اطلاعات شبکه برای بهبود تجربه کاربری برای کاربران با سرعت‌های اتصال مختلف آورده شده است:

۱. بهینه‌سازی تصاویر

ارائه تصاویر کوچک‌تر و بهینه‌سازی‌شده به کاربران با اتصالات کندتر می‌تواند به طور قابل توجهی زمان بارگذاری صفحه را بهبود بخشد و مصرف داده را کاهش دهد. به جای تحویل تصاویر با وضوح بالا به همه، می‌توانید نسخه‌های با وضوح پایین‌تر را بر اساس `effectiveType` به صورت شرطی بارگذاری کنید.

            function loadImage(imageUrl, lowResImageUrl) {
  if (navigator.connection && navigator.connection.effectiveType === 'slow-2g') {
    // Load low-resolution image
    document.getElementById('myImage').src = lowResImageUrl;
  } else {
    // Load high-resolution image
    document.getElementById('myImage').src = imageUrl;
  }
}

// Example usage
loadImage('image.jpg', 'image-lowres.jpg');

            

              
                Copy
              
            
          

استفاده از یک شبکه تحویل محتوا (CDN) مانند Cloudflare، Akamai یا AWS CloudFront را در نظر بگیرید که به طور خودکار تصاویر و سایر دارایی‌ها را بر اساس دستگاه و شرایط شبکه بهینه می‌کند. این CDNها اغلب ویژگی‌هایی مانند تغییر اندازه تصویر، فشرده‌سازی و تبدیل فرمت (مثلاً به WebP) را برای کاهش بیشتر حجم فایل‌ها ارائه می‌دهند.

مثال بین‌المللی: در کشورهایی با شبکه‌های 2G/3G رایج، مانند بخش‌هایی از هند، اندونزی یا نیجریه، ارائه تصاویر بهینه‌سازی‌شده برای یک تجربه کاربری مثبت حیاتی است.

۲. تطبیق کیفیت ویدئو

برای برنامه‌های پخش ویدئو، می‌توان از API اطلاعات شبکه برای تنظیم پویای کیفیت ویدئو استفاده کرد. کاربران با اتصالات سریع‌تر می‌توانند استریم‌های با وضوح بالاتر دریافت کنند، در حالی که کاربران با اتصالات کندتر استریم‌های با وضوح پایین‌تر را برای جلوگیری از بافرینگ و مشکلات پخش دریافت می‌کنند.

            function setVideoQuality() {
  if (navigator.connection) {
    const effectiveType = navigator.connection.effectiveType;

    switch (effectiveType) {
      case 'slow-2g':
        // Set video quality to 240p
        break;
      case '2g':
        // Set video quality to 360p
        break;
      case '3g':
        // Set video quality to 480p
        break;
      case '4g':
        // Set video quality to 720p or higher
        break;
      default:
        // Set a default quality based on average connection speed
        break;
    }
  }
}

// Call this function when the video player initializes
setVideoQuality();

            

              
                Copy
              
            
          

پلتفرم‌های پخش ویدئوی مدرن اغلب از فناوری‌های پخش با بیت‌ریت تطبیقی (ABS) مانند HLS یا DASH استفاده می‌کنند. این فناوری‌ها به طور پویا کیفیت ویدئو را بر اساس شرایط شبکه کاربر تنظیم می‌کنند و حتی در اتصالات نوسانی، تجربه تماشای یکپارچه‌ای را فراهم می‌کنند. می‌توان از API اطلاعات شبکه برای اصلاح بیشتر الگوریتم ABS و بهینه‌سازی انتخاب کیفیت ویدئو استفاده کرد.

مثال بین‌المللی: در برزیل، جایی که بسته‌های اینترنت موبایل می‌تواند گران باشد، کاهش خودکار کیفیت ویدئو در اتصالات کندتر می‌تواند به کاربران در صرفه‌جویی داده و جلوگیری از هزینه‌های اضافی کمک کند.

۳. غیرفعال کردن یا ساده‌سازی انیمیشن‌ها

انیمیشن‌ها و ترنزیشن‌های پیچیده می‌توانند پهنای باند و قدرت پردازشی قابل توجهی را مصرف کنند، به خصوص در دستگاه‌های قدیمی‌تر و اتصالات کندتر. برای بهبود واکنش‌گرایی، غیرفعال کردن یا ساده‌سازی انیمیشن‌ها را برای کاربران در شبکه‌های کندتر در نظر بگیرید.

            function toggleAnimations() {
  if (navigator.connection && (navigator.connection.effectiveType === 'slow-2g' || navigator.connection.effectiveType === '2g')) {
    // Disable animations
    document.body.classList.add('no-animations');
  } else {
    // Enable animations
    document.body.classList.remove('no-animations');
  }
}

// Call this function on page load
toggleAnimations();

            

              
                Copy
              
            
          

از CSS media queryها نیز می‌توان برای غیرفعال کردن شرطی انیمیشن‌ها بر اساس سرعت شبکه استفاده کرد:

            @media (net-connection: slow) {
  .animated-element {
    animation: none !important;
    transition: none !important;
  }
}
            

              
                Copy
              
            
          

مثال بین‌المللی: در مناطقی با دستگاه‌های موبایل قدیمی‌تر و سخت‌افزار ضعیف‌تر، مانند آسیای جنوب شرقی، غیرفعال کردن انیمیشن‌های غیرضروری می‌تواند به طور قابل توجهی عملکرد محسوس وب‌سایت یا برنامه را بهبود بخشد.

۴. محدود کردن واکشی داده‌ها

از واکشی داده‌های غیرضروری برای کاربران با اتصالات کند خودداری کنید. استفاده از صفحه‌بندی (pagination) یا بارگذاری تنبل (lazy loading) را برای بارگذاری تدریجی محتوا به جای بارگذاری همه چیز به یکباره در نظر بگیرید. همچنین می‌توانید بارگذاری محتوای حیاتی را در اولویت قرار دهید و بارگذاری محتوای کم‌اهمیت‌تر را تا زمانی که کاربر به پایین اسکرول کند یا با صفحه تعامل داشته باشد، به تعویق بیندازید.

            function fetchData(url, isPriority) {
  if (navigator.connection && navigator.connection.saveData && !isPriority) {
    // User has requested data saving, so don't fetch non-priority data
    return;
  }

  fetch(url)
    .then(response => response.json())
    .then(data => {
      // Process the data
    });
}

// Example usage
fetchData('/api/important-data', true); // Priority data
fetchData('/api/non-essential-data', false); // Non-priority data

            

              
                Copy
              
            
          

به خصوصیت `saveData` در API اطلاعات شبکه توجه ویژه‌ای داشته باشید. وقتی `saveData` برابر با true باشد، کاربر به صراحت درخواست کاهش مصرف داده را داشته است. با به حداقل رساندن واکشی داده‌ها و ارائه محتوای بهینه‌سازی‌شده به این اولویت احترام بگذارید.

مثال بین‌المللی: در بسیاری از کشورهای آفریقایی، اینترنت موبایل نسبتاً گران است. احترام به اولویت `saveData` می‌تواند برنامه شما را برای کاربران در این مناطق در دسترس‌تر و مقرون‌به‌صرفه‌تر کند.

۵. قابلیت آفلاین

برای کاربرانی با اتصالات اینترنتی متناوب یا غیرقابل اعتماد، پیاده‌سازی قابلیت آفلاین می‌تواند تجربه بسیار روان‌تری را فراهم کند. می‌توان از Service Workerها برای کش کردن دارایی‌ها و داده‌های حیاتی استفاده کرد و به کاربران اجازه داد حتی زمانی که آفلاین هستند به استفاده از برنامه شما ادامه دهند.

API اطلاعات شبکه را می‌توان در ترکیب با Service Workerها برای به‌روزرسانی پویای کش بر اساس وضعیت اتصال کاربر استفاده کرد. به عنوان مثال، می‌توانید تصمیم بگیرید که دارایی‌های با وضوح بالاتر را زمانی که کاربر به یک شبکه Wi-Fi سریع متصل است، دانلود کنید.

مثال بین‌المللی: در مناطق روستایی آمریکای جنوبی که دسترسی به اینترنت اغلب غیرقابل اعتماد است، قابلیت آفلاین می‌تواند یک تغییردهنده بازی باشد و به کاربران اجازه دهد حتی زمانی که به اینترنت متصل نیستند به اطلاعات و خدمات مهم دسترسی داشته باشند.

نظارت بر تغییرات اتصال

API اطلاعات شبکه همچنین رویدادهایی را برای نظارت بر تغییرات در اتصال کاربر فراهم می‌کند. شما می‌توانید به رویداد `change` در شیء `navigator.connection` گوش دهید تا به تغییرات در نوع اتصال، پهنای باند یا RTT واکنش نشان دهید.

            if (navigator.connection) {
  navigator.connection.addEventListener('change', () => {
    console.log('Connection type changed:', navigator.connection.effectiveType);
    // Re-evaluate and adjust the user experience based on the new connection information
    adjustUserExperience();
  });
}

function adjustUserExperience() {
  // Implement logic to update image quality, video quality, animations, etc.
}

            

              
                Copy
              
            
          

این به شما امکان می‌دهد تا تجربه کاربری را به صورت پویا با تغییر شرایط شبکه کاربر تطبیق دهید و یک تجربه مثبت و مداوم را بدون توجه به کیفیت اتصال تضمین کنید.

ملاحظات حریم خصوصی

در حالی که API اطلاعات شبکه اطلاعات ارزشمندی را برای بهینه‌سازی تجربه کاربری فراهم می‌کند، توجه به حریم خصوصی کاربر مهم است. این API به طور بالقوه می‌تواند برای انگشت‌نگاری کاربران استفاده شود، به خصوص زمانی که با سایر APIهای مرورگر ترکیب شود. برای کاهش این خطر، از جمع‌آوری یا ذخیره غیرضروری اطلاعات اتصال خودداری کنید و در مورد نحوه استفاده از داده‌های اتصال کاربران با آنها شفاف باشید.

برخی از مرورگرها ممکن است قبل از ارائه دسترسی به API اطلاعات شبکه، به اجازه کاربر نیاز داشته باشند. برای مواردی که API در دسترس نیست یا به دلیل محدودیت‌های حریم خصوصی اطلاعات محدودی را برمی‌گرداند، آماده باشید.

بهترین شیوه‌ها و ملاحظات

• بهبود تدریجی (Progressive Enhancement): استراتژی‌های تطبیقی را به عنوان یک بهبود تدریجی پیاده‌سازی کنید. وب‌سایت یا برنامه شما باید همچنان کاربردی باشد، حتی اگر API اطلاعات شبکه پشتیبانی نشود یا در دسترس نباشد.
• کنترل کاربر: به کاربران گزینه‌هایی برای نادیده گرفتن تنظیمات تطبیقی شما ارائه دهید. به عنوان مثال، به کاربران اجازه دهید کیفیت ویدئو یا وضوح تصویر مورد نظر خود را به صورت دستی انتخاب کنند.
• آزمایش: استراتژی‌های تطبیقی خود را به طور کامل بر روی انواع دستگاه‌ها و شرایط شبکه آزمایش کنید. از ابزارهای توسعه‌دهنده مرورگر برای شبیه‌سازی سرعت‌های مختلف شبکه و تأخیر استفاده کنید.
• نظارت بر عملکرد: عملکرد وب‌سایت یا برنامه خود را در شبکه‌های مختلف برای شناسایی زمینه‌های بهبود نظارت کنید. از ابزارهایی مانند Google PageSpeed Insights یا WebPageTest برای تجزیه و تحلیل زمان بارگذاری صفحه و شناسایی گلوگاه‌ها استفاده کنید.
• دسترسی‌پذیری: اطمینان حاصل کنید که استراتژی‌های تطبیقی شما تأثیر منفی بر دسترسی‌پذیری ندارند. به عنوان مثال، برای تصاویری که به دلیل سرعت پایین اتصال بارگذاری نمی‌شوند، متن جایگزین (alt text) ارائه دهید.
• رویکرد اول-موبایل (Mobile-First): هنگام طراحی و توسعه وب‌سایت یا برنامه خود، رویکرد اول-موبایل را اتخاذ کنید. این تضمین می‌کند که برنامه شما از ابتدا برای اتصالات کندتر و صفحه‌های کوچک‌تر بهینه شده است.

نتیجه‌گیری

منابع بیشتر

• مستندات وب MDN: API اطلاعات شبکه
• web.dev: بهینه‌سازی محتوا برای شرایط مختلف شبکه
• مجله Smashing: استفاده از API اطلاعات شبکه برای بهبود تجربه کاربری